<template>
	<view>
		<view class="personal-info-top">
			<view class="personal-info-top-contain">
				<view class="personal-info-top-contain-pic">
					<!-- <image v-if="userInfoData.accountHead" class="top-bar-info-img" :src="constUrl+userInfoData.accountHead" mode="aspectFit"></image>
					<image class="top-bar-info-img" v-else src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/nologinaccount.png"  mode="aspectFit"></image> -->
					<avatar
					        class="head-b"
					        selWidth="200px" selHeight="400upx" @upload="myUpload" :avatarSrc="userInfoData.accountHead?userInfoData.accountHead:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/public/upload-img.png'"
					        avatarStyle="width: 136upx; height: 136upx; border-radius: 100%;">
					</avatar>
					<image class="camera-b" src="https://www.innovationgloble.com/wxs/img/wx/camera.png" mode=""></image>
				</view>
				<view class="personal-info-top-contain-info">
					<view class="personal-info-top-contain-title">
						{{titleName}}
					</view>
					<view class="personal-info-top-contain-account">
						登录账号：{{userInfoData.phoneNumber}}
					</view>
				</view>
			</view>
		</view>
		<view class="personal-info-base">
			<view class="personal-info-base-title">
				<view class="person-left-ver">

				</view>
				<view class="person-info-base-tip">
					基本信息
				</view>
			</view>
		</view>
		<view class="person-info-base-form">
			<view class="person-info-base-form-contain">
				<form @submit="formSubmit" @reset="formReset">
					<view class="person-info-form-item">
						<view class="person-info-form-item-contain">
							<text class="person-ms-in">*</text>
							<text class="person-ms-item-title">姓名</text>
						</view>
							<input placeholder-style="font-size:28upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(178,178,178,1);"
							 class="person-info-input" v-model="userInfoData.realName" name="nickname" placeholder="请输入您的姓名" />
							 
					</view>
					<view class="person-info-form-item">
						<view class="person-info-form-item-contain">
							<text class="person-ms-in">*</text>
							<text class="person-ms-item-title">城市</text>
						</view>
						<view class="uni-list">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db" style="position: relative;">
									<picker @change="cityChange" @cancel="cityCancel" mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"
									 range-key="name">
										<view v-if="workCity!==''" style="border-bottom: none;"
										placeholder="请输入您的工作城市" name="workCity" class="person-info-input">
											{{selectCityName}}
										</view>
										<view style="font-size: 36upx;color: #A9A9A9;position: absolute;right: 0;top: 0;" class="icon iconfont iconbott"></view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<view class="person-info-form-item">
						<view class="person-info-form-item-contain">
							<text class="person-ms-in">*</text>
							<text class="person-ms-item-title">工作单位</text>
						</view>
						<input placeholder-style="font-size:28upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(178,178,178,1);"
						 class="person-info-input" v-model="userInfoData.workUnit" name="workUnit" placeholder="请输入您的工作单位" />
					</view><view class="person-info-form-item">
						<view class="person-info-form-item-contain">
							<text class="person-ms-in">*</text>
							<text class="person-ms-item-title">职务</text>
						</view>
						<input placeholder-style="font-size:28upx;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(178,178,178,1);"
						 class="person-info-input" v-model="userInfoData.jobDuties" name="workUnit" placeholder="请输入您的职务" />
					</view>
			<!-- 		<view class="person-info-form-item">
						<view class="person-info-form-item-contain">
							<text class="person-ms-in">*</text>
							<text class="person-ms-item-title">上传头像</text>
						</view>
						<view class="up-load">
							<avatar
							        class="head-b"
							        selWidth="200px" selHeight="400upx" @upload="myUpload" :avatarSrc="userInfoData.accountHead?constUrl+userInfoData.accountHead:'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/public/upload-img.png'"
							        avatarStyle="width: 136upx; height: 136upx; border-radius: 100%;">
							</avatar>
						</view>
					</view> -->
					<view class="person-info-bottom">
						<view class="person-info-bottom-opt">
							<button form-type="submit">保存</button>
						</view>
					</view>
				</form>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	var graceChecker = require("../../common/graceChecker.js");
	export default {
		data() {
			return {
				replacePhonNumber: '',
				userInfoData: {},
				isUpLoad:false,
				date: '',
				multiArray: [
					[],
					[]
				],
				titleName:'',
				multiIndex: [],
				originMultiIndex:[],
				options: [],
				defaultRegion1: [],
			}
		},
		components:{
			avatar
		},
		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo']),
			selectCityName(){
				let multiIndex = this.multiIndex;
				let multiArray = this.multiArray;
				if(multiArray[1][multiIndex[1]]){
					return multiIndex.length==0?'':(multiArray[0][multiIndex[0]].name+"，"+multiArray[1][multiIndex[1]].name);
				}
				else{
					// console.log('multiArray[1] ', multiArray[1]);
					return multiIndex.length==0?'':(multiArray[0][multiIndex[0]].name);
				}
			}
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			//上传头像
			myUpload(rsp) {
							console.log(rsp)
							let that = this;
							try {
							    const userInfo = uni.getStorageSync('userInfo');
								uni.uploadFile({
									url:this.$baseUrl +'upLoading',
									filePath:rsp.path,
									formData:{
										model:'person'
									},
									name:'file',
									header:{
										token:userInfo.token
									},
									success:(e)=>{
										let res = JSON.parse(e.data);
										console.log('图片上传成功',JSON.parse(e.data))
										if (res.ret){
											that.userInfoData.accountHead = res.data;
											uni.showToast({
												title:'头像上传成功'
											})
											that.isUpLoad = true;
											
										}else{
											uni.showToast({
												title:res.errmsg,
												icon:'none'
											})
										}
									},
									fail:res=> {
										uni.showToast({
											title:'图片上传失败',
											icon:'none'
										})
										console.log(res);
									}
								})
								
							} catch (e) {
							    // error
							}
			},
			cityCancel(){
				let provinceIndex = 0;
				this.multiArray[0].filter((val,index)=>{
					if(val.regionId===this.originMultiIndex[0]-0){
						provinceIndex = index
					}
				})
				this.multiIndex.splice(0,1,provinceIndex)
				let cityIndex = 0;
				this.multiArray[0][provinceIndex].children.filter((val,index)=>{
					if(val.regionId===this.originMultiIndex[1]-0){
						cityIndex = index
					}
				})
				this.multiArray.splice(1,1,this.multiArray[0][provinceIndex].children);
				this.multiIndex.splice(1,1,cityIndex)
			},
			cityChange(){	
				if(this.multiIndex.length==0){
					this.multiIndex = [0,0]
				}
				if(this.multiArray[1][this.multiIndex[1]?this.multiIndex[1]:0]){
					this.originMultiIndex = [ this.multiArray[0][this.multiIndex[0]].regionId,   this.multiArray[1][this.multiIndex[1]?this.multiIndex[1]:0].regionId]
				}else{
					console.log('this.multiArray[1] ', this.multiArray[1]);
					this.originMultiIndex = [ this.multiArray[0][this.multiIndex[0]].regionId,this.multiArray[1][0].regionId];
				}
				console.log('this.originMultiIndex ', this.originMultiIndex);
			},
			formSubmit: function(e) {
				//定义表单规则
				var rule = [
					{
						name: "workUnit",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入您的工作单位"
					}
				];
				if(this.userInfoData.realName.length>20||this.userInfoData.realName.length<0){
					uni.showToast({
						title: "姓名应为1-20个字符",
						icon: "none"
					});
					return false
				}
				if(this.multiIndex.length<1){
					uni.showToast({
						title: "请选择您的工作城市",
						icon: "none"
					});
					return false
				}
				if(!this.userInfoData.workUnit){
					uni.showToast({
						title: "请输入您的工作单位",
						icon: "none"
					});
					return false
				}
				if(this.userInfoData.workUnit.length>20){
					uni.showToast({
						title: "工作单位应为1-20个字符",
						icon: "none"
					});
					return false
				}
				
				if(!this.userInfoData.jobDuties){
					uni.showToast({
						title: "请输入您的职务",
						icon: "none"
					});
					return false
				}
				if(this.userInfoData.jobDuties.length>20){
					uni.showToast({
						title: "职务应为1-20个字符",
						icon: "none"
					});
					return false
				}
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.userInfoData.province = this.multiArray[0][this.multiIndex[0]].regionId;
					if(this.multiArray[1][this.multiIndex[1]]){
						this.userInfoData.city = this.multiArray[1][this.multiIndex[1]].regionId;
					}
					
					this.$request.post({
						url: 'user/updateUserinfo',
						data: {
							realName:this.userInfoData.realName,
							birthdate:this.date,
							workUnit:this.userInfoData.workUnit,
							jobDuties:this.userInfoData.jobDuties,
							province:this.userInfoData.province,
							city:this.userInfoData.city,
							userId:this.userInfoData.userId,
							accountHead:this.userInfoData.accountHead
						},
					}).then(res => {
						uni.showToast({
							title: "信息更新成功!",
							icon: "none"
						});
						this.userInfoData.birthdate = this.date;
						this.saveUserInfo(this.userInfoData);
						setTimeout(()=>{
							uni.navigateBack();
						},300)
					})
					
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			formReset: function(e) {
			},
			bindMultiPickerColumnChange: function(e) {
				if(e.detail.column===0){
					this.multiIndex[1] = 0 //重置市
					let provinceIndex = e.detail.value;
					//获取当前省份id
					let provinceId = this.multiArray[0][provinceIndex].regionId;
					this.multiArray[0].filter((val,index)=>{
						if(val.regionId == provinceId){
							this.multiIndex.splice(0,1,index);
							return index
						}
					})
					if(this.multiArray[0][provinceIndex].children){
						this.multiArray.splice(1, 1, this.multiArray[0][provinceIndex].children);
					}else{
						this.getCity(provinceId,provinceIndex,false);
					}
					
				}
				if(e.detail.column===1){
					let cityIndex = e.detail.value;
					this.multiIndex.splice(1,1,cityIndex);
					console.log(this.multiIndex)
				}
				this.$forceUpdate()
			},
			//根据省份获取所在市
			getCity(provinceId , provinceIndex , isConfirm){
				this.$request.get({
					url: 'region/queryCityByProvinceId.json',
					data: {
						provinceId
					},
				}).then(res=>{
					this.multiArray[0][provinceIndex].children = res;
					this.multiArray.splice(1, 1, res);
					
					if(this.userInfoData.city){
						res.filter((val,index)=>{
							if(val.regionId == this.userInfoData.city){
								// this.multiIndex = this.multiIndex.push(index);
								this.multiIndex.splice(1,1,index);
								return index
							}
						})
					}
				})
			},
			getAllProvince() {
				this.$request.get({
					url: 'region/queryAllProvinces.json',
					data: {},
				}).then(res => {
					this.multiArray.splice(0, 1, res);
					this.originMultiIndex=[this.userInfoData.province,this.userInfoData.city];
					//判断用户是否输入省市
					if(this.userInfoData.province){
						let provinceIndex;
						res.filter((val,index)=>{
							if(val.regionId == this.userInfoData.province){
								provinceIndex=index;
								this.multiIndex.splice(0,1,index);
								return index
							}
						})
						this.getCity(this.userInfoData.province , provinceIndex , true);
					}else{
						this.getCity(res[0].regionId,0,false);
					}
				})
			},
			//上传正面图片
			uploadPosImage(){
				let that = this;
				try {
				    const userInfo = uni.getStorageSync('userInfo');
					uni.chooseImage({
					    count: 1, //默认9
					    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					    sourceType: ['album'], //从相册选择
					    success: function (res) {			
							uni.uploadFile({
								url:this.$baseUrl +'upLoading',
								filePath:res.tempFilePaths[0],
								formData:{
									model:'person'
								},
								name:'file',
								header:{
									token:userInfo.token
								},
								success:(e)=>{
									let res = JSON.parse(e.data);
									console.log('图片上传成功',JSON.parse(e.data))
									if (res.ret){
										that.userInfoData.accountHead = res.data;
										uni.showToast({
											title:'头像上传成功'
										})
										that.isUpLoad = true;
										
									}else{
										uni.showToast({
											title:res.errmsg,
											icon:'none'
										})
									}
								},
								fail:res=> {
									uni.showToast({
										title:'图片上传失败',
										icon:'none'
									})
									console.log(res);
								}
							})
					    },
						fail:res=> {
							console.log(res);
						}
					});
					
				} catch (e) {
				    // error
				}
			}
		},
		onLoad() {
			this.userInfoData = uni.getStorageSync('userInfo');
			this.getAllProvince();
			
			this.date = this.userInfoData.birthdate ? this.userInfoData.birthdate.split('T')[0] : '';
			let arr = [...this.userInfoData.phoneNumber];
			for (let i = 0; i < arr.length; i++) {
				if (i > 2 && i < 7) {
					arr[i] = "*"
				}
			}
			this.replacePhonNumber = arr.join('');
			if(this.userInfoData.realName){
				this.titleName = this.userInfoData.realName;
			}else{
				this.titleName = ('用户'+this.replacePhonNumber)
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.up-load {
		width: 202upx;
		height: 202upx;
		image {
			width: 202upx;
			height: 202upx;
		}
	}
	.personal-info-top-contain-pic {
		width: 144upx;
		height: 144upx;
		padding: 2upx;
		border-radius: 50%;
		position: relative;
		.camera-b{
			position: absolute;
			bottom: 8upx;
			right: 8upx;
			width: 44upx;
			height: 44upx;
		}
	}
	.margin-top25 {
		margin-top: 25upx;
	}

	.personal-info-top {
		width: 100%;
		height: 273upx;
		background-image: url("https://www.innovationgloble.com/wxs/img/wx/info-banner1.png");
		background-size: 100%;
		position: relative;
		padding: 66upx 47upx;
	}

	.personal-info-top-contain {
		display: flex;
		align-items: center;
	}

	.top-bar-info-img {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.personal-info-top-contain-info {
		margin-left: 34upx;
	}

	.personal-info-top-contain-title {
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
	}

	.personal-info-top-contain-account {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.personal-info-base-title {
		display: flex;
		align-items: center;
		padding: 23upx 30upx;
		border-bottom: 1upx solid #DDDDDD;
	}

	.person-left-ver {
		width: 5upx;
		height: 32.5upx;
		background-color: #2A7DFA;
	}

	.person-info-base-tip {
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 21upx;
	}

	.person-ms-in {
		color: #DE5A02;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	}

	.person-ms-item-title {
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.person-info-base-form-contain {
		padding: 0 40upx;
	}

	.person-info-input {
		border-bottom: 1upx solid #E1E1E1;
		padding-bottom: 20upx;
		padding-left: 15upx;
		height: 70upx;
		box-sizing: border-box;
	}  

	.person-info-form-item {
		margin-top: 25upx;
	}

	.person-info-form-item-contain {
		margin-bottom: 25upx;
	}

	.uni-list::after {
		height: 1upx;
	}

	.uni-list::before {
		height: 0;
	}

	.person-info-bottom {
		margin-top: 51upx;
		margin-bottom: 62upx;
	}
	.person-info-bottom-opt>button{
		font-size:30upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		height: 88upx;
		line-height: 88upx;
		background-color: #2A7DFA;
		border-radius: 44upx;
	}
</style>
